<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
            width: 700px;
            margin:20px auto;
        }
        button{
            width: 80px;
            height: 35px;
            margin:0 5px;
            font:16px/35px microsoft yahei;
        }
        textarea{
            resize:none;
            width: 300px;
            height: 300px;
            font:16px/30px "simsun";
            color:#fff;
            vertical-align:middle;
            background-color:#666;
        }
    </style>
</head>
<body>
<div class="box">
    <textarea cols="30" rows="10"></textarea><button>开始传送</button><textarea cols="30" rows="10"></textarea>
</div>
<script>
    var text=document.getElementsByTagName("textarea");
    var btn=document.getElementsByTagName("button")[0];
    var j=0;
    var i=0;
        var timer=null;
        clearInterval(timer);
        btn.onclick=function(){
                    j++;
                    clearInterval(timer);
                    if(j%2){
                        var str=text[0].value;
                        var arr=str.split("");
                        timer=setInterval(function(){
                            if(i<arr.length){
                                text[0].value=str.substring(i);
                                text[1].value+=arr[i];
                                i++;
                            }
                            if(i===arr.length){
                                clearInterval(timer);
                                text[0].value="";
                            }
                        },100)
                        btn.innerHTML="停止传送";
                    }else{
                        clearInterval(timer);
                        btn.innerHTML="开始传送";
                    }

                }
</script>
</body>
</html>